<template>
  <div style="padding: 16px">
    <el-skeleton :rows="5" :loading="data.isFirst" animated>
      <el-descriptions
        title="职务详情"
        direction="vertical"
        :column="3"
        border
      >
        <template #extra>
          <el-button
            @click="events.toggleEdit"
            :type="!data.isEdit ? 'warning' : 'danger'"
            >{{ data.isEdit ? "保存" : "编辑" }}</el-button
          >
        </template>

        <el-descriptions-item width="33%" label="职务名称">
          <template v-if="!data.isEdit"> {{ data.data.name }}</template>
          <el-input
            v-show="data.isEdit"
            type="text"
            v-model="data.data.name"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item width="33%" label="等级">
          <template v-if="!data.isEdit"> {{ data.data.dlv }}</template>
          <el-input-number
            v-show="data.isEdit"
            v-model="data.data.dlv"
            :min="0"
            :max="100"
            controls-position="right"
            placeholder="等级"
          ></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item width="33%" label="创建时间">
          {{ data.data.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="使用次数">
          {{ data.data.personnel }}
        </el-descriptions-item>
        <el-descriptions-item label="是否启用">
          <template v-if="!data.isEdit">
            {{ data.data.isBan == 1 ? "否" : "是" }}
          </template>
          <el-select
            v-show="data.isEdit"
            v-model="data.data.isBan"
            placeholder="请选择"
          >
            <el-option label="否" :value="1"></el-option>
            <el-option label="是" :value="0"></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="描述" :span="3">
          <template v-if="!data.isEdit"> {{ data.data.dexplain }}</template>
          <el-input
            v-show="data.isEdit"
            type="textarea"
            v-model="data.data.dexplain"
            rows="4"
          ></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </el-skeleton>
  </div>
</template>

<script setup lang="ts">
import {Get_DutyDetails ,Update_Duty } from "@/api/org";
import { notice } from "@/utils/notice";
import type { Duty_Detail_Data } from "@/utils/types";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const data = reactive<Duty_Detail_Data>({
  isFirst: true,
  data: {
    id: "",
    name: "",
    dlv: 0,
    createTime: "",
    personnel: 0,
    isBan: 0,
    dexplain: "",
  },
  isEdit: false,
});

const methods = {
  async bind() {
    const res = await Get_DutyDetails({
      id: route.params.id.toString(),
    });
    if (res.code === 0) {
      data.data = res.data.data[0];
    }
  },
};

const events = {
  // 切换编辑模式
  toggleEdit() {
    if (data.isEdit) {
      events.saveChanges();
    } else {
      data.isEdit = true;
    }
  },
  // 保存更改
  async saveChanges() {
    try {
      const res = await Update_Duty({
        id: data.data.id,
        name: data.data.name,
        dlv: data.data.dlv,
        dexplain: data.data.dexplain,
        isBan: data.data.isBan,
      });
      console.log('Update_Duty response:', res); // 添加调试信息
      if (res.code === 0) {
        notice({ code: 0, message: '职务信息更新成功' });
        data.isEdit = false;
      } else {
        notice(res);
      }
    } catch (error) {
      console.error('更新职务信息失败', error);
      notice({ code: -1, message: '更新职务信息失败' });
    }
  },
};

onMounted(async () => {
  await methods.bind();
  data.isFirst = false;
});
</script>

<style scoped></style>



